<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Group</title>
    <link rel="stylesheet" href="../../model/element.css">
    <link rel="stylesheet" href="../../model/jsFn.css">
</head>
<body>
<div class="catalog">
    <h1>目录</h1>
    <ul>
        <li>
            <p><a href="#element">< group ></a></p>
        </li>
        <li>
            <p><a href="#attribute">属性</a></p>
            <ul>
                <li><p><a href="#example">实例</a></p></li>
                <li><p><a href="#optional">可选属性</a></p></li>
                <li><p><a href="#note">提示和注释</a></p></li>
                <li><p><a href="#sketch">效果图</a></p></li>
            </ul>
        </li>
        <li>
            <p><a href="#jsFn">js函数</a></p>
            <ul>
                <li><p><a href="#jsFn_set">set</a></p></li>
                <li><p><a href="#jsFn_get">get</a></p></li>
                <li><p><a href="#jsFn_init">init</a></p></li>
            </ul>
        </li>
        <li>
            <p><a href="#childElement">子标签</a></p>
            <ul>
                <li>
                    <p><a href="#childElement_img">img</a></p>
                </li>
            </ul>
        </li>
    </ul>
</div>
<div id="element">
    <h2>Group style-2</h2>
    <div>
        <p>简介:</p>
        <p>采用瀑布流式布局，以应对更多需求</p>
    </div>
</div>
<div id="attribute">
    <h2>属性</h2>
    <div style="margin-left: 25px" id="example">
        <h3>实例:</h3>
        <xmp>
            <group style="2" num="3" height="210">
                <img attr="150,200">ceshi.YYtu.YYY019.jpg</img>
                <img attr="130,100">ceshi.YYtu.YYY021.jpg</img>
                <img attr="150,200">ceshi.YYtu.YYY022.jpg</img>
                <img attr="130,100">ceshi.YYtu.YYY023.jpg</img>
            </group>
        </xmp>
    </div>
    <div id="optional">
        <h3>可选属性:</h3>
        <table>
            <tbody>
            <tr>
                <th>属性</th>
                <th>值</th>
                <th>描述</th>
            </tr>
            <tr>
                <td>font</td>
                <td>string/int
                    <br/>
                    例：font="#ff0000,12,centerline,ture,left"
                    <br/>
                    true加粗，false不加粗（默认不加粗）
                    <br/>
                    underLine:下划线（默认无）
                    <br/>
                    centerLine:中划线（默认无）
                    <br/>
                    right/left/center:字体居右/左上角/中间（默认居中）
                    <br/>
                    max:带一个整数,表示最大行数，多余字数省略号(默认1行)
                    <br/>
                    10:字体大小，sp单位（默认系统大小约为14-15sp）
                </td>
                <td>控件内的所有的字体效果,就近原则,如果内标签参数对应这个参数，则以内标签为准，默认12sp，黑色</td>
            </tr>
            <tr>
                <td>stroke</td>
                <td>string/float <br/>例：stroke="#ff0000,1" <br/>1:边框粗细,#开头为颜色</td>
                <td>控件边框的属性，默认无边框；参数#开头代表边框颜色，数字代表边框粗细单位，一般2个参数一起用</td>
            </tr>
            <tr>
                <td>radius</td>
                <td>float <br/>例：radius="10"</td>
                <td>控件的圆角，默认无圆角（参数整形/浮点型数字</td>
            </tr>
            <tr>
                <td>ripple</td>
                <td>string <br/>例：ripple="#ff0000"</td>
                <td>控件的点击效果，按下背景颜色变化，抬起颜色恢复，6位颜色或者8位带透明度颜色</td>
            </tr>
            <tr>
                <td>num</td>
                <td>int <br/>例：num="3"/num="2,3"</td>
                <td>1个参数只代表一行有几列，2个参数，第1个为行数，第2个为列数</td>
            </tr>
            <tr>
                <td>spacing</td>
                <td>float <br/>例：spacing="3" /spacing="4,3"</td>
                <td>行列间距 参数为1个时 行列间距一致，参数为2个，第一个为行间距，第二个为列间距</td>
            </tr>
            <tr>
                <td>attr</td>
                <td>float <br/>例：attr="50" /attr="50,60"</td>
                <td>控件内所有图片的宽高属性，默认宽高都为35dp,如果内标签img有这个属性，按照内标签属性为准，参数为1个时，宽高一致；参数为2个时，第一个为宽，第二个为高</td>
            </tr>
            <tr>
                <td>btn</td>
                <td>int <br/>例：btn="r10,s#ff0000,2,h100,w100,b#00ff00"
                    <br/>
                    r10.5:r开头，代表button弧度
                    <br/>
                    s#ff0000:s#开头，代表button边框的颜色
                    <br/>
                    w100:w开头代表button的宽度
                    <br/>
                    h100:h开头代表button的高度
                    <br/>
                    b#00ff00:b#开头，代表button的背景色
                    <br/>
                    2:数字代表边框粗细
                </td>
                <td>控件下所有button的标签的属性</td>
            </tr>
            </tbody>
        </table>
    </div>
    <div id="note">
        <h3>提示和注释:</h3>
        <p>height属性为必填属性</p>
    </div>
    <div id="sketch">
        <h3>效果图:</h3>
        <img src="img/shequ_03.png" alt="">
    </div>
</div>
<div id="jsFn">
    <h2>JS方法</h2>
    <div class="jsFnModel" id="jsFn_set">
        <h3>set</h3>
        <p> <a href="../group/group1.html">详见Group Style1 </a></p>
    </div>
    <div class="jsFnModel" id="jsFn_get">
        <h3>get</h3>
        <p> <a href="../group/group1.html">详见Group Style1 </a></p>
    </div>
    <div class="jsFnModel" id="jsFn_init">
        <h3>init</h3>
        <p> <a href="../group/group1.html">详见Group Style1 </a></p>
    </div>
</div>
<div id="childElement">
    <h2>子标签</h2>
    <div id="childElement_img">
        <h3>img</h3>
        <p>用于group内部显示图片</p>
        <p>用法参见 <a href="../img/index.html">< img ></a></p>
    </div>
</div>
<div class="author">
    <p>by-沛华</p>
</div>
</body>
</html>